<template>
  <div class="dashboard">
    <h4 class="title" style="margin-bottom: 20px; font-weight: bold">
      核心指标
    </h4>
    <!-- 销售统计 -->
    <div class="sales-stats">
      <el-row class="stats-row">
        <p style="font-size: 40px; font-weight: bold; margin-bottom: 10px">
          <el-icon>
            <Tickets />
          </el-icon>
        </p>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-col :span="3">
          <el-statistic title="4月销售订单收入(元)" :value="salesIncome" />
        </el-col>
        <p style="font-size: 40px; font-weight: bold; margin-bottom: 10px">
          <el-icon>
            <Tickets />
          </el-icon>
        </p>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-col :span="3">
          <el-statistic :value="salesOrderCount" title="3月销售订单收入(元)" />
        </el-col>
        <!-- 这里添加其他指标 -->
      </el-row>
    </div>
    <!-- 图表 -->
    <div class="chart-container">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="销售统计" name="second">
          <div style="width: 1400px; height: 400px" id="salesChart" class="chart"></div>
        </el-tab-pane>
        <!-- 这里添加其他图表 -->
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";
import { ref } from "vue";
import { watch } from "vue";

const salesIncome = ref(0);
const salesOrderCount = ref(0);
const activeTab = ref("second"); // 默认显示销售统计的柱状图

// 在 setup 函数内部使用 watch 函数来监听数据变
watch(salesIncome, (newVal, oldVal) => {
  console.log(`salesIncome 变化，新值为: ${newVal}, 旧值为: ${oldVal}`);
  // 在这里可以添加处理 salesIncome 变化的逻辑
  // 比如更新页面展示操作
});

const fetchData = async () => {
  try {
    // 发送 HTTP 请求获取销售统计数据
    const response = await axios.get("Sale/CountSale");
    const data = response.data;

    // 处理后台返回的数据，更新销售统计指标
    if (data && data.length > 0) {
      salesIncome.value = data[0].SlaesCount; // 假设第一个数据是4月销售订单收入
      salesOrderCount.value = data[1].SlaesCount; // 假设第二个数据是3月销售订单收入
    }

    // 初始化 echarts 图表
    let salesChart = echarts.init(document.getElementById("salesChart"));

    // 设置销售统计图表的配置项和数据
    let salesOption = {
      // 销售统计图表配置项
      // 可根据实际需求添加配置
      // 示例配置已在你提供的代码中
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      xAxis: [
        {
          type: "category",
          data: data.map((item) => item.SlaesDate), // x 轴为日期
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "销售额",
          type: "bar",
          barWidth: "30%",
          data: data.map((item) => item.SlaesCount), // y 轴为销售额
        },
      ],
    };

    // 渲染图表
    salesChart.setOption(salesOption);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

onMounted(() => {
  fetchData(); // 页面加载时获取数据
  // 设置定时任务，每隔一段时间获取一次数据
  setInterval(fetchData, 1000); // 每分钟获取一次数据，可根据实际需求调整时间间隔
});
</script>

<style scoped>
.title {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
  padding: 10px;
  border-radius: 10px;
}
.dashboard {
  padding: 20px;
  background-color: #f3f4f6;
}

.sales-stats {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stats-row {
  margin-bottom: 5px;
  font-size: 14px;
}

.chart-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart {
  width: 80%;
  height: 400px;
}
</style>
